<template>
  <div id="right-top"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
//@ts-ignore
import echarts from "@/hooks/useEcharts";
// import { getCostStatistics } from '@/api/home'

const colors = [
  "#178BFF",
  "#adceef",
  "#58a55c",
  "#f2bd42",
  "#ee752f",
  "#d95040",
  "#ED4FEC",
];

const echartData = ref([]);
onMounted(() => {
  getData("", 1);
});
const initEchats = async () => {
  var chartDom = document.getElementById("right-top");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    color: colors,
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      top: 12,
      icon: "circle",
      right: 0,
      itemHeight: 8,
      itemWidth: 8,
    },
    textStyle: {
      fontSize: 8,
    },
    series: [
      {
        type: "pie",
        radius: "48%",
        center: ["40%", "50%"],
        avoidLabelOverlap: false,
        // itemStyle: {
        //   // borderRadius: 10,
        //   borderColor: "#fff",
        //   borderWidth: 2,
        // },
        // formatter: "{a} <br\/>{b} : {c}%",
        label: {
          formatter: "{b} \n{d}%({c})",
        },
        normal: {
          label: {
            show: true,
            fontSize: 10,
            // fontWeight: "bold",
          },
        },

        labelLine: {
          show: true,
          normal: {
            length: 5, //第一条线
            length2: 10, //第二条线
          },
        },
        data: echartData.value,
      },
    ],
  };
  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

async function getData(date: any, tabCode: number) {
  const data = {
    area: "",
    date: date,
  };
  // const [err, res] = await getCostStatistics(data)
  echartData.value = [
    // { value: 15, name: '总计' },
    {
      value: 10,
      name: "立项,需求分析",
      label: {
        color: "#178BFF",
      },
    },
    {
      value: 20,
      name: "招标准备",
      label: {
        color: "#adceef",
      },
    },
    {
      value: 25,
      name: "投标准备、递交",
      label: {
        color: "#58a55c",
      },
    },
    {
      value: 15,
      name: "中标、合同签署",
      label: {
        color: "#f2bd42",
      },
    },
    {
      value: 3,
      name: "项目执行",
      label: {
        color: "#ee752f",
      },
    },
    {
      value: 20,
      name: "项目交付",
      label: {
        color: "#d95040",
      },
    },
    {
      value: 7,
      name: "项目结算总结",
      label: {
        color: "#ED4FEC",
      },
    },
  ];
  initEchats();
}

defineExpose({ getData });
</script>
<style scoped lang="scss">
.left-center {
  width: 100%;
}
</style>
